<template>
  <c-card isAffix>
    <c-table
      row-key="id"
      class="table-template__table"
      :loading="loading"
      :data="tableData"
      v-model:search="searchParams"
      v-model:paging="paging"
      @refresh="queryTableData"
    >
      <!-- 搜索栏 -->
      <template #search>
        <c-select
          width="100%"
          v-model="searchParams.channel"
          prefixText="积分来源："
          :optionList="ChannelMap"
        ></c-select>
      </template>

      <!-- 表格 -->
      <template #table>
        <el-table-column prop="channel" label="积分来源">
          <template #default="{ row }">
            {{ ChannelMap.getLabel(row.channel) }}
          </template>
        </el-table-column>

        <el-table-column prop="score" label="积分">
          <template #default="{ row }">
            <span :class="[row.type == 1 && 'is-success-text', row.type == 2 && 'is-error-text']">
              {{ row.score }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="create_date" label="时间">
          <template #default="{ row }">
            {{ dayjs(row.create_date).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
      </template>
    </c-table>
  </c-card>
</template>

<script setup name="el-encap.table-template">
import { ref, computed, onMounted } from 'vue';

// hooks
import { useTable } from '@/hooks/useTable/index.js';
import { useFetch } from '@/hooks/useFetch/index.js';

// components
import { MessageBox } from '@/utils/message-box';
import { ElMessage } from 'element-plus';

// router
import { useRouter } from 'vue-router';
const router = useRouter();

// store modal
import { useModalStore } from '@/pinia/modules/modal';
const modalStore = useModalStore();

// user
import { useUserStore } from '@/pinia/modules/user.js';
const userStore = useUserStore();

import { pageListScore } from '@/apis/score';

import { ChannelMap } from '@/config/global-variable';

import dayjs from 'dayjs';

// 表格相关
const { loading, paging, searchParams, tableData, queryTableData, delTableRow } = useTable({
  api: pageListScore,
  params: {
    mini_userid: userStore?.userInfo?.miniData?._id,
    channel: '',
  },
  options: {},
  callBack: () => {},
});

onMounted(() => {});
</script>

<style lang="scss" scoped></style>
